<template>
  <div>
    <div class="open-member">
      <div style="margin-top:20px;">
        <hd-svg-icon name="hd-zuanshi" slot="left" size="17px" color="#218B98"></hd-svg-icon>
        <span>当前尚未开通居游会员</span>
        </div><br>
      <yd-button class="open-button" bgcolor="#218B98">立即开通</yd-button>
    </div>
    <div class="center-grids">
      <div class="grids-item">
        <div class="grids-item-border">
          <hd-svg-icon name="hd-shangchengicon13" slot="left" size="30px" style="margin-top:8px;"></hd-svg-icon>
        </div>
        <div>我的订单</div>
      </div>
      <div class="grids-item">
        <div class="grids-item-border">
          <hd-svg-icon name="hd-shangchengicon13" slot="left" size="30px" style="margin-top:8px;"></hd-svg-icon>
        </div>
        <div>我的足迹</div>
      </div>
      <div class="grids-item">
        <div class="grids-item-border">
          <hd-svg-icon name="hd-shangchengicon13" slot="left" size="30px" style="margin-top:8px;"></hd-svg-icon>
        </div>
        <div>我的投诉</div>
      </div>
      <div class="grids-item">
        <div class="grids-item-border">
          <hd-svg-icon name="hd-shangchengicon13" slot="left" size="30px" style="margin-top:8px;"></hd-svg-icon>
        </div>
        <div>优惠卡券</div>
      </div>
      <div class="grids-item">
        <div class="grids-item-border">
          <hd-svg-icon name="hd-shangchengicon13" slot="left" size="30px" style="margin-top:8px;"></hd-svg-icon>
        </div>
        <div>每日签到</div>
      </div>
      <div class="grids-item">
        <div class="grids-item-border">
          <hd-svg-icon name="hd-shangchengicon13" slot="left" size="30px" style="margin-top:8px;"></hd-svg-icon>
        </div>
        <div>我的游记</div>
      </div>
    </div>
    
    <div class="bottom-choose">
            <yd-cell-group>
              <yd-cell-item arrow>
                  <span slot="left" style="margin-top:5px;">
                    <hd-svg-icon name="hd-lipinqia" color="#218B98" size=".4rem" style="margin-top:5px;"></hd-svg-icon>
                    <span style="margin-left:10px;font-size: .35rem;">我的收藏</span>
                  </span>
              </yd-cell-item>
            </yd-cell-group>
            <yd-cell-group>
              <yd-cell-item arrow>
                  <span slot="left">
                    <hd-svg-icon name="hd-lipinqia" color="#218B98" size=".4rem" style="margin-top:5px;"></hd-svg-icon>
                    <span style="margin-left:10px;font-size: .35rem;"></span>
                  </span>
              </yd-cell-item>
            </yd-cell-group>
            <yd-cell-group>
              <yd-cell-item arrow>
                  <span slot="left">
                    <hd-svg-icon name="hd-lipinqia" color="#218B98" size=".4rem" style="margin-top:5px;"></hd-svg-icon>
                    <span style="margin-left:10px;font-size: .35rem;"></span>
                  </span>
              </yd-cell-item>
            </yd-cell-group>
    </div>


  </div>
</template>
<style scoped>
  .open-member{
    text-align: center;
    width: 100%;
    height: 80px;
    font-size: .25rem;
    color: #218B98;
  }
  .open-button{
    width: 35%;
    /* margin-top: 15px; */
    border-radius: 30px;
  }
  .center-grids{
    width: 100%;
    height: 280px;
    border-top:10px solid #F0F0F0;
    border-bottom:10px solid #F0F0F0;
  }
  .grids-item{
    width:33%;
    height:50%;
    float:left;
    text-align: center;
    font-size: .28rem;
    line-height: 30px;
  }
  .bottom-choose{
    height:200px;
    width:100%;
    margin-top:15px;
  }
  .grids-item-border{
    margin-top:30px;
    height:60px;
    width:60px;
    background-color:#218B98;
    border-radius: 20px;
    padding-top:5px;
    margin-left:25%
  }
</style>
